<template>
	<div class="list" ref='wrapper'>
		<div>
			<div class="arae">
				<div class="tittle border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="arae">
				<div class="tittle border-topbottom">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" v-for="item of city " :key="item.id" @click="handleCityClick(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<!-- key为对象的键名，类似数组的id -->
			<div class="arae" v-for="(item,key) of cites" :key='key'>
				<div class="tittle border-topbottom" :ref='key'>{{key}}</div>
				<ul class="item-list">
					<li class="item border-bottom" v-for="innerItem of item" :key='innerItem.id' @click="handleCityClick(innerItem.name)">{{innerItem.name}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	/* 使用better-scroll 第三方组件包实现区域的滚动*/
	import Bscroll from 'better-scroll'
	export default {
		name: 'CityList',
		props: {
			/* 数据校验 */
			city: Array,
			cites: Object,
			letter: String
		},
		methods: {
			handleCityClick(city) {
				/* 
					vuex中通过dispatch方法来触发action 再在action中使用commit调用 mutations
					如果不是批量操作可以略过action直接调用mutations
				 */
				this.$store.commit('changeCity', city);
				/* 
					除过使用router-link to标签进行跳转还可以用编程式导航进行页面跳转
					编程式导航：通过vue-router的push方法进行页面跳转
				*/
				this.$router.push('/');
			}
		},
		mounted() {
			/* 当时用了第三方库better-scroll的时候 会默认使点击事件失效,需要设置打开 */
			this.scroll = new Bscroll(this.$refs.wrapper, {
				click: true
			});
		},
		/* 通过监听器监听city组件中传来的数据 */
		watch: {
			letter() {
				if (this.letter) {
					/* element是一个dom节点 */
					const element = this.$refs[this.letter][0];
					/* 调用better-scrollscroll的方法实现跳转指定区域  该方法的参数必须是一个dom结构或者选择器 */
					this.scroll.scrollToElement(element);
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '~styles/varibles.less';
	.border-topbottom {
		/* 所有该元素之前和之后的样式 */
		&:before,
		&:after {
			border-color: #ccc;
		}
	}
	.border-bottom {
		&:before {
			border-color: #ccc;
		}
	}
	.list {
		overflow: hidden;
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
		.tittle {
			line-height: 0.54rem;
			background: #eee;
			padding-left: 0.2rem;
			color: #666;
			font-size: 0.26rem;
		}
		.button-list {
			padding: 0.1rem 0.6rem 0.1rem 0.1rem;
			overflow: hidden;
			.button-wrapper {
				width: 33.33%;
				float: left;
				.button {
					padding: 0.1rem 0;
					text-align: center;
					margin: 0.1rem;
					border: 0.02rem solid #ccc;
					border-radius: 0.06rem;
				}
			}
		}
		.item-list {
			.item {
				line-height: 0.76rem;
				padding-left: 0.2rem;
			}
		}
	}
</style>
